<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <!--覆盖上列样式  -->
     <link rel="stylesheet" href="res/css/bootstrap.min.css">
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <link rel="stylesheet" href="res/css/global.css">
    <link rel="stylesheet" href="res/css/style.css"/>
    <link rel="stylesheet" href="res/layui/extend/steps/style.css">
    <style>
  #container-main {
  padding-bottom: 60px;
  overflow: hidden;
  background: #F5F5F5;
  width:1200px;
  margin: 2px auto
}
#container-main .content-layout .layui-breadcrumb {
  background-color: #fff;
  padding: 30px;
  display: block;
}
#container-main .content-layout .layui-breadcrumb a,
#container-main .content-layout .layui-breadcrumb span {
  text-decoration: none;
  font-size: 20px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 20px;
}
#container-main .content-layout .layui-breadcrumb a:hover,
#container-main .content-layout .layui-breadcrumb span:hover {
  color: #666666!important;
}
#container-main .content-layout .curse-main {
  background-color: #fff;
  padding-bottom: 30px;
  margin-bottom: 10px;
}
#container-main .content-layout .curse-main .jump-live {
  text-decoration: none;
  display: inline-block;
  width: 600px;
  height: 338px;
  position: relative;
}
#container-main .content-layout .curse-main .jump-live .up-shade {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 500;
  overflow: hidden;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 40%, rgba(50, 50, 50, 0.2) 89%, rgba(0, 0, 0, 0.3) 100%, rgba(0, 0, 0, 0.2) 100%);
}
#container-main .content-layout .curse-main .jump-live .up-shade .start-btn {
  display: block;
  margin: 139px 0 0 282px;
  width: 36px;
  height: 36px;
  background-color: #EEEEEE;
}
#container-main .content-layout .curse-main .jump-live .up-shade .free-study {
  margin-top: 10px;
  font-size: 14px;
  color: #FFBD00;
  letter-spacing: 0;
  text-align: center;
  line-height: 14px;
}
#container-main .content-layout .curse-main .jump-live img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#container-main .content-layout .curse-main .curse-right {
  vertical-align: top;
  width: 540px;
  display: inline-block;
  margin-left: 30px;
}
#container-main .content-layout .curse-main .curse-right .curse-name {
  margin-bottom: 15px;
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 30px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#container-main .content-layout .curse-main .curse-right .fun-box-curse {
  margin-bottom: 20px;
  overflow: hidden;
}
#container-main .content-layout .curse-main .curse-right .fun-box-curse .curse-f-item {
  position: relative;
  float: left;
  font-size: 14px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 14px;
  margin-right: 32px;
}
#container-main .content-layout .curse-main .curse-right .fun-box-curse .curse-f-item:nth-child(2)::before,
#container-main .content-layout .curse-main .curse-right .fun-box-curse .curse-f-item:nth-child(3)::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: #9B9B9B;
  left: -18px;
  top: 6px;
}
#container-main .content-layout .curse-main .curse-right .fun-box-curse .curse-f-item .icon-btn {
  display: inline-block;
  font-size: 12px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 12px;
  text-decoration: none;
}
#container-main .content-layout .curse-main .curse-right .fun-box-curse .curse-f-item .icon-btn .icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background-color: #999999;
  margin-right: 10px;
}
#container-main .content-layout .curse-main .curse-right .curse-cost {
  display: block;
  font-size: 24px;
  color: #FFBD00;
  letter-spacing: 0;
  line-height: 24px;
  margin-bottom: 50px;
}
#container-main .content-layout .curse-main .curse-right .curse-inform {
  overflow: hidden;
  display: block;
}
#container-main .content-layout .curse-main .curse-right .curse-inform .inform-list {
  margin-bottom: 20px;
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 16px;
}
#container-main .content-layout .curse-main .curse-right .curse-inform .inform-list .right-msg {
  margin-left: 20px;
  display: inline-block;
  text-decoration: none;
}
#container-main .content-layout .curse-main .curse-right .curse-inform .inform-list .right-msg .icon-ticket {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background-color: #FFBD00;
}
#container-main .content-layout .curse-main .curse-right .curse-inform .inform-list .ticket-get {
  color: #FFBD00;
}
#container-main .content-layout .curse-main .curse-right .main-fun-box .layui-btn {
  text-decoration: none;
  float: right;
  width: 132px;
  height: 46px;
  line-height: 46px;
  display: block;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #94A5FA;
  letter-spacing: 0;
  border: 1px solid #94A5FA;
  margin-left: 20px;
}
#container-main .content-layout .curse-main .curse-right .main-fun-box .buy {
  background: #2F5AFF;
  color: #ffffff;
}
#container-main .content-layout .curse-main .curse-right .main-fun-box .consult {
  background-color: #fff;
  color: #94A5FA;
}
#container-main .content-layout .curse-particulars {
  width: 100%;
}
#container-main .content-layout .curse-particulars .particulars-left {
  float: left;
  display: inline-block;
  width: 870px;
  overflow: hidden;
  background-color: #fff;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .particulars-l-t {
  width: 100%;
  height: 58px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .particulars-l-t .layui-tab-title {
  border: none;
  display: flex;
  justify-content: center;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .particulars-l-t .layui-tab-title .layui-this::after {
  border: none;
  border-bottom: 2px solid #2F5AFF;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .particulars-l-t .layui-tab-title li {
  margin: 0 80px;
  font-weight: 600;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content {
  padding: 40px 30px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-title {
  font-size: 18px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dt {
  margin-bottom: 15px;
  font-weight: 500;
  font-size: 17px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 17px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dt span {
  margin-right: 10px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd {
  margin-bottom: 15px;
  padding-left: 30px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd .icon-play {
  vertical-align: top;
  display: inline-block;
  width: 30px;
  height: 19px;
  background: #A5A9AD;
  border-radius: 4px;
  margin-right: 15px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd .class-msg {
  margin-right: 34px;
  width: 244px;
  display: inline-block;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd .class-msg .class-title {
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 16px;
  margin-bottom: 8px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd .class-msg .class-date {
  font-size: 14px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 14px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail dd .study-free-btn {
  padding: 0;
  vertical-align: top;
  display: inline-block;
  text-decoration: none;
  width: 92px;
  height: 33px;
  border: 1px solid #94A5FA;
  border-radius: 8px;
  font-size: 15px;
  color: #94A5FA;
  letter-spacing: 0;
  text-align: center;
  line-height: 33px;
  background-color: #fff;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail .active .icon-play {
  background: #FFBD00;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail .active .class-msg .class-title,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .layui-tab-item .cate-detail .active .class-msg .class-date {
  color: #FFBD00;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose {
  margin-bottom: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose .good-rep {
  display: inline-block;
  font-size: 18px;
  color: #FFBD00;
  letter-spacing: 0;
  line-height: 18px;
  margin-right: 50px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose .com-choose {
  display: inline-block;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose .com-choose .com-level {
  cursor: pointer;
  float: left;
  margin-right: 30px;
  font-size: 14px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 14px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose .com-choose .com-level .layui-icon {
  margin-right: 10px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .top-choose .com-choose .choose {
  color: #FFBD00;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item {
  width: 100%;
  margin-bottom: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top {
  margin-bottom: 11px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l {
  display: inline-block;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l .user-header-c {
  width: 64px;
  height: 64px;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l .user-header-c img {
  width: 100%;
  height: 100%;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l .user-inform {
  vertical-align: top;
  margin-top: 10px;
  display: inline-block;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l .user-inform .user-name-c {
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 15px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-l .user-inform .com-date-c {
  font-size: 14px;
  color: #D0D4DB;
  letter-spacing: 0;
  line-height: 14px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-r {
  float: right;
  margin-top: 12px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-top .com-t-r #com1 {
  font-size: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .common-part .com-list .com-item .com-bottom {
  display: block;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/

  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/

  -webkit-line-clamp: 2;
  /** 显示的行数 **/

  overflow: hidden;
  font-size: 14px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 24px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .curse-i-title {
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 21px;
  clear: both;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .impress-list {
  overflow: hidden;
  display: block;
  margin-bottom: 41px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .impress-list .impress {
  float: left;
  width: 84px;
  height: 26px;
  border: 1px solid #94A5FA;
  border-radius: 8px;
  font-size: 14px;
  color: #94A5FA;
  letter-spacing: 0;
  text-align: center;
  line-height: 26px;
  margin-right: 22px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top {
  margin-bottom: 15px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-header-i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  margin-right: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-header-i img {
  width: 100%;
  height: 100%;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-intro-base {
  display: inline-block;
  vertical-align: top;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-intro-base .teacher-name-i {
  margin-top: 8px;
  margin-bottom: 16px;
  display: inline-block;
  font-size: 20px;
  color: #2F5AFF;
  letter-spacing: 0;
  line-height: 20px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-intro-base .teacher-iden {
  margin-left: 20px;
  display: inline-block;
  font-size: 14px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 14px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-eval {
  display: block;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-eval .eval-item {
  float: left;
  font-size: 14px;
  color: #9B9B9B;
  letter-spacing: 0;
  line-height: 14px;
  border-right: 1px solid  #D0D4DB;
  padding-right: 40px;
  margin-right: 40px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-eval .eval-item:last-child {
  margin-right: 0px;
  padding-right: 0;
  border: none;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .teacher-eval .eval-item .eval-d {
  margin-left: 5px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .teacher-box .teacher-top .follow-btn {
  background: #94A5FA;
  border-radius: 8px;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  display: block;
  float: right;
  text-decoration: none;
  width: 92px;
  height: 33px;
  line-height: 33px;
  margin-top: 15px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .intro-box {
  margin-bottom: 40px;
  font-size: 14px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 24px;
  text-indent: 2em;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content .curse-intro .poster {
  width: 100%;
  height: 600px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-f .layui-laypage,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-s .layui-laypage,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-t .layui-laypage {
  clear: both;
  margin: 47.5px 0 10px 230px;
}
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-f .layui-laypage a,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-s .layui-laypage a,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-t .layui-laypage a,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-f .layui-laypage span,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-s .layui-laypage span,
#container-main .content-layout .curse-particulars .particulars-left .layui-tab .layui-tab-content #laypage-t .layui-laypage span {
  overflow: hidden;
  color: #999999;
  text-align: center;
  padding: 0;
  width: 31px;
  height: 31px;
  background: #F8F9FB;
  border-radius: 8px;
  margin-right: 20px;
}
#container-main .content-layout .curse-particulars .particulars-right {
  float: left;
  display: inline-block;
  width: 320px;
  margin-left: 10px;
}
#container-main .content-layout .curse-particulars .particulars-right .download-m {
  background-color: #fff;
  width: 100%;
  height: 156px;
  padding: 20px 15px;
  margin-bottom: 10px;
}
#container-main .content-layout .curse-particulars .particulars-right .download-m .m-name {
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 26px;
  margin-bottom: 22px;
}
#container-main .content-layout .curse-particulars .particulars-right .download-m .m-name .m-logo {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 10px;
  background-color: #2F5AFF;
  vertical-align: top;
}
#container-main .content-layout .curse-particulars .particulars-right .download-m .download-btn {
  text-decoration: none;
  font-size: 14px;
  color: #94A5FA;
  letter-spacing: 0;
  line-height: 14px;
  display: block;
  text-align: center;
}
#container-main .content-layout .curse-particulars .particulars-right .download-m .download-btn .icon-down {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #94A5FA;
  vertical-align: middle;
}
#container-main .content-layout .curse-particulars .particulars-right .m-title {
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 20px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec {
  width: 100%;
  height: 692px;
  background-color: #fff;
  padding: 20px 15px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .z-b-unit {
  width: 280px;
  float: left;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 8px;
  height: 287px;
  margin-bottom: 20px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 26px;
  width: 280px;
  height: 287px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #DAE0FD;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .cur-live-img {
  margin-bottom: 10px;
  display: block;
  width: 100%;
  height: 157px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .cur-live-img img {
  width: 100%;
  height: 100%;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live:hover {
  box-shadow: 0 2px 4px 2px rgba(218, 224, 253, 0.8);
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live:last-child {
  margin-right: 0;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live:nth-child(3) {
  margin-right: 0;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .curse-name {
  text-decoration: none;
  height: 56px;
  display: block;
  color: #4A4A4A;
  padding: 4px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .teachers {
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .teachers .z-b-curse-garde {
  float: left;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .teachers .z-b-curse-garde li {
  float: left;
  margin-right: 6px;
  width: 15px;
  height: 15px;
  background: #FFBD00;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .teachers .z-b-curse-garde .garde {
  float: left;
  font-size: 15px;
  color: #9B9B9B;
  font-style: normal;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .teachers .teacher-name {
  font-weight: 700;
  display: inline-block;
  font-size: 20px;
  color: #17BC3F;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .has-learn {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 15px;
  color: #D0D4DB;
  letter-spacing: 0;
  line-height: 15px;
}
#container-main .content-layout .curse-particulars .particulars-right .curse-rec .curse-live .has-learn i {
  font-style: normal;
}
.curse-fun {
  display: none;
}
.curse-fun .full-shade {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10003;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  /*兼容IE8及以下版本浏览器*/

  filter: alpha(opacity=30);
  display: block;
}
.curse-fun .hide-style {
  display: none;
  border-radius: 8px;
  position: fixed;
  z-index: 10004;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.curse-fun .hide-style .hide-d-style {
  overflow: hidden;
  display: block;
  position: relative;
}
.curse-fun .hide-style .hide-d-style .curse-title {
  font-weight: 600;
  text-align: center;
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 20px;
  margin: 40px 0 20px;
}
.curse-fun .hide-style .hide-d-style .layui-icon-close {
  position: absolute;
  right: 20px;
  top: 20px;
  display: block;
  font-size: 30px;
  color: #9B9B9B;
}
.curse-fun .hide-style .hide-d-style .del-hint {
  font-size: 14px;
  color: #6E6E6E;
  letter-spacing: 0;
  text-align: center;
  line-height: 14px;
}
.curse-fun .hide-style .hide-d-style .sure-btn {
  display: block;
  margin: 0 auto;
  width: 114px;
  height: 40px;
  background: #2F5AFF;
  border-radius: 7px;
  text-decoration: none;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
}
.curse-fun .get-ticket {
  display: none;
  width: 389px;
  height: 180px;
}
.curse-fun .get-ticket .del-hint {
  margin-bottom: 26px;
}
.curse-fun .curse-buy {
  display: none;
  width: 629px;
  height: 483px;
}
.curse-fun .curse-buy .hide-d-style {
  padding: 0 40px;
}
.curse-fun .curse-buy .layui-icon-close {
  right: 40px;
  top: 40px;
}
.curse-fun .curse-buy .curse-title {
  margin: 40px 0 32px 0;
}
.curse-fun .curse-buy .curse-ord {
  border-bottom: 2px solid  #F8F9FB;
  width: 549px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.curse-fun .curse-buy .curse-ord .curse-img {
  display: inline-block;
  width: 280px;
  height: 157px;
  border-radius: 8px;
  margin-right: 20px;
  overflow: hidden;
}
.curse-fun .curse-buy .curse-ord .curse-inform-b {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
}
.curse-fun .curse-buy .curse-ord .curse-inform-b .curse-name-b {
  font-size: 17px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 17px;
  margin-bottom: 25px;
}
.curse-fun .curse-buy .curse-ord .curse-inform-b .msg-box {
  margin-bottom: 15px;
}
.curse-fun .curse-buy .curse-ord .curse-inform-b .teacher-msg-b {
  vertical-align: top;
  font-size: 14px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 14px;
  display: inline-block;
}
.curse-fun .curse-buy .curse-ord .curse-inform-b .date-curse {
  display: inline-block;
  font-size: 14px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 14px;
  font-style: normal;
}
.curse-fun .curse-buy .ord-msg {
  margin-bottom: 20px;
  overflow: hidden;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg {
  margin-bottom: 20px;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg p {
  display: inline-block;
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 16px;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg .ord-t {
  width: 80px;
  margin-left: 10px;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg .use-discounts {
  cursor: pointer;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg .active {
  color: #FFBD00;
}
.curse-fun .curse-buy .ord-msg .ord-item-msg .layui-icon {
  color: #9B9B9B;
}
.curse-fun .curse-buy .buy-box {
  text-align: right;
}
.curse-fun .curse-buy .buy-box .layui-btn {
  border: 1px solid #2F5AFF;
  margin-left: 30px;
  width: 114px;
  height: 40px;
  border-radius: 8px;
  background: #2F5AFF;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
}
.curse-fun .curse-buy .buy-box .cancel-btn {
  background-color: #fff;
  color: #2F5AFF;
}
.curse-fun .curse-buy .buy-box .buy-now-btn {
  text-decoration: none;
  display: inline-block;
}
.curse-fun .use-ticket {
  display: block;
  width: 629px;
  height: 483px;
}
.curse-fun .use-ticket .hide-d-style {
  padding: 0 40px;
}
.curse-fun .use-ticket .layui-icon-close {
  right: 40px;
  top: 40px;
}
.curse-fun .use-ticket .layui-icon-left {
  position: absolute;
  left: 20px;
  top: 20px;
  display: block;
  font-size: 30px;
  color: #9B9B9B;
}
.curse-fun .use-ticket .ticket {
  overflow: hidden;
  background-color: #fff;
  width: 397px;
  height: 155px;
  margin: 0 auto 20px ;
}
.curse-fun .use-ticket .ticket:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.curse-fun .use-ticket .ticket .ticket-over {
  width: 100%;
  height: 102px;
  border: 1px solid #efefef;
  border-bottom: 1px dashed #efefef;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-l {
  float: left;
  margin: 36px 0 0 20px;
  font-size: 15px;
  font-weight: 700;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-l .face-value {
  font-size: 40px;
  font-style: normal;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-c {
  float: left;
  margin: 27px 0  0 34px;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-c .ticket-name {
  font-size: 20px;
  color: #4A4A4A;
  margin-bottom: 18px;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-c .use-range {
  font-size: 15px;
  color: #9B9B9B;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-r {
  float: right;
  margin: 36px 20px 0 0;
}
.curse-fun .use-ticket .ticket .ticket-over .t-o-r .use-now {
  width: 92px;
  height: 35px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  border: none;
}
.curse-fun .use-ticket .ticket .ticket-down {
  width: 100%;
  border: 1px solid #efefef;
  border-top: none;
  height: 53px;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.curse-fun .use-ticket .ticket .ticket-down::before {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  content: '';
  display: block;
  border-radius: 0 8px 8px 0;
  border: 1px solid #efefef;
  border-left: none;
}
.curse-fun .use-ticket .ticket .ticket-down::after {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  content: '';
  display: block;
  border-radius: 8px 0 0 8px;
  border: 1px solid #efefef;
  border-left: none;
}
.curse-fun .use-ticket .ticket .ticket-down .deadline {
  padding-left: 20px;
  line-height: 53px;
  font-size: 15px;
  color: #9B9B9B;
}
.curse-fun .use-ticket .ticket .ticket-down .deadline i {
  display: inline-block;
  font-style: normal;
}
.curse-fun .use-ticket .can-use .t-o-l {
  color: #FF3A48;
}
.curse-fun .use-ticket .can-use .t-o-r .use-now {
  background: #FF3A48;
  box-shadow: 0 0 4px 0 rgba(255, 59, 48, 0.5);
}
.curse-fun .use-ticket .can-use .ticket-down {
  background: #FFFDFA;
}
.curse-fun .use-ticket .if-use {
  padding-left: 74px;
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  line-height: 16px;
}
.curse-fun .use-ticket .if-use .layui-icon-circle {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 16px;
}

    </style>
</head>
<body>

<!--导航模块-->
   <div class="header">
      <div class="main">
         <a href="main.html"><img class="fl logoimg" src="res/images/fly.jpg"></a>
            <a class="title fl" href="#">
          我是学生</a>
         <a class="title fl" href="#"> 
          帮助中心</a>
       
        <div class="nav-user">

            <div class="fl user-header-top">
            <a class="lindang" href="">
            <img src="res/images/tx.png">
            </a>
         <div class="tanshow">
            <div class="triangle"></div>
          <div class="personal-fun ">

              <ul>
                  <li class="fun-list">
                      <a href="javascript:;">粉丝</a>
                  </li>
                  <li class="fun-list">
                      <a href="javascript:;">课程标签</a>
                  </li>
                  <li class="fun-list">
                      <a href="javascript:;">系统通知</a>
                  </li>
              </ul>
              </div>
             </div>
              </div>
            <div class="fl user-header-top">
            <a class="lindang "  href="">
            <img src="res/images/xx.png">
            </a>
                        <div class="tanshow">
            <div class="triangle"></div>
          <div class="personal-fun ">

              <ul>
                  <li class="fun-list">
                      <a href="javascript:;">私聊</a>
                  </li>
                  <li class="fun-list">
                      <a href="javascript:;">群聊</a>
                  </li>
               
              </ul>
              </div>
             </div>
            </div>
         <div class="fl user-header-top">
            <a   class="iconfont   icon-touxiang layui-hide-xs" style="margin-top: 4px; display: inline-block;">
            </a>

            <div class="tanshow">
            <div class="triangle"></div>
          <div class="personal-fun ">

              <ul>
                     <li class="fun-list">
                      <a href="setting.html">系统设置</a>
                  </li>
                  <li class="fun-list">
                      <a href="javascript:;">退出登录</a>
                  </li>
              </ul>
              </div>
             </div>
          </div>
        </div>
      </div>
    </div>
<!--主体部分-->
<div class="container-layout" id="container-main">
    <div class="content-layout" >
        <span class="layui-breadcrumb" lay-separator=">">
          <div class="cursorlan" style="font-size: 20px">预览《UI设计高级课程》</div>

        </span>
        <div class="curse-main">
            <a href="" class="jump-live">
                <div class="up-shade">
                    <span class="start-btn"></span>
                    <p class="free-study">免费试学</p>
                </div>
                <img src="" alt="">
            </a>
            <div class="curse-right">
                <p class="curse-name">甄妮-UI设计高级课程甄妮-UI设计高级课程甄妮-UI设计高级课程甄妮-UI设计高级课程甄妮-UI设计高级课程</p>
                <ul class="fun-box-curse">
                    <li class="curse-f-item">0人购买</li>
                    <li class="curse-f-item">0%好评</li>
                    <li class="curse-f-item">0人评论</li>
              <!--       <li class="curse-f-item"><a href="javascript:;" class="col-btn icon-btn"><span class="icon"></span>收藏</a></li>
                    <li class="curse-f-item"><a href="javascript:;" class="share-btn icon-btn"><span class="icon"></span>分享</a></li> -->
                </ul>
                <p class="curse-cost">￥1300.00</p>
                <ul class="curse-inform">
                    <li class="inform-list">使用优惠
                     <p class="right-msg">无</p>
                 <!--        <a href="javascript:;" class="right-msg ticket-get"><span class="icon-ticket"></span>10元课程优惠券&nbsp 领取</a> -->
                    </li>
                    <li class="inform-list">总计课时
                        <p class="right-msg">共34课时</p>
                    </li>
                    <li class="inform-list">支付保障
                        <p class="right-msg">开课前随时退</p>
                    </li>
                </ul>
                
            </div>
        </div>
        <div class="curse-particulars">
            <div class="particulars-left">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div class="particulars-l-t">
                        <ul class="layui-tab-title">
                            <li>介绍</li>
                            <li class="layui-this">目录</li>
                            <li>评价（0）</li>
                        </ul>
                    </div>

                    <div class="layui-tab-content">
                        <div class="layui-tab-item curse-intro">
                            <p class="curse-i-title">教师印象</p>
                            <ul class="impress-list">
                                <li class="impress">美女老师</li>
                                <li class="impress">美女老师</li>
                                <li class="impress">美女老师</li>
                                <li class="impress">美女老师</li>
                                <li class="impress">美女老师</li>
                                <li class="impress">美女老师</li>
                            </ul>
                            <p class="curse-i-title">教师简介</p>
                            <div class="teacher-box">
                                <div class="teacher-top">
                                    <a href="./teacher-page.html" class="teacher-header-i">
                                        <img src="" alt="">
                                    </a>
                                    <div class="teacher-intro-base">
                                        <p class="teacher-name-i">甄妮<span class="teacher-iden">腾讯UI设计师</span></p>
                                        <ul class="teacher-eval">
                                            <li class="eval-item">评级：<span class="eval-d">A</span></li>
                                            <li class="eval-item">课程：<span class="eval-d">2</span></li>
                                            <li class="eval-item">学生：<span class="eval-d">232</span></li>
                                        </ul>
                                    </div>
                                  <!--   <a href="javascript:;" class="follow-btn">关注</a> -->
                                </div>
                                <div class="intro-box">
                                    目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯目前认知与腾讯
                                </div>
                            </div>
                            <p class="curse-i-title">课程简介</p>

                            <div class="intro-box">沟通是人与人之间沟通是人与人之间沟通是人与人之间沟通是人与人之间沟通是人与人之间沟通是人与人之间沟通是人与人之间沟通是人与人之间</div>
                            <p class="curse-i-title">课程时间</p>
                            <div class="intro-box">
                                2018-10-12至2018-12-05<br>
                                每周一、周三、周五 09:00-11：00
                            </div>
                            <p class="curse-i-title">课程详情</p>
                            <img src="" alt="" class="poster">
                        </div>
                        <div class="layui-tab-item layui-show">
                            <p class="cate-title">共24课时</p>
                            <dl class="cate-detail">
                                <dt><span>01</span>图标绘制</dt>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dt><span>01</span>图标绘制</dt>
                                <dd class="active">
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dt><span>01</span>图标绘制</dt>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dt><span>01</span>图标绘制</dt>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dt><span>01</span>图标绘制</dt>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                                <dd>
                                    <span class="icon-play"></span>
                                    <div class="class-msg">
                                        <p class="class-title">有趣的图标变化史</p>
                                        <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                                    </div>
                                    <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                                </dd>
                            </dl>
                            <div id="laypage-f"></div>
                        </div>
                        <div class="layui-tab-item common-part">
                      <!--       <div class="top-choose">
                                <p class="good-rep">好评率：100%</p>
                                <ul class="com-choose">
                                    <li class="com-level choose"><span class="layui-icon layui-icon-radio evaluate"></span>好评</li>
                                    <li class="com-level"><span class="layui-icon layui-icon-circle evaluate"></span>好评</li>
                                    <li class="com-level"><span class="layui-icon layui-icon-circle evaluate"></span>好评</li>
                                </ul>
                            </div>
                            <ul class="com-list">
                                <li class="com-item">
                                    <div class="com-top">
                                        <div class="com-t-l">
                                            <a href="./student-page.html" class="user-header-c"><img src="" alt=""></a>
                                            <div class="user-inform">
                                                <p class="user-name-c">大林</p>
                                                <p class="com-date-c">今天&nbsp15:03</p>
                                            </div>
                                        </div>
                                        <div class="com-t-r">
                                            <div id="com1"></div>
                                        </div>
                                    </div>
                                    <div class="com-bottom">
                                        内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富
                                    </div>
                                </li>
                                <li class="com-item">
                                    <div class="com-top">
                                        <div class="com-t-l">
                                            <a href="./student-page.html" class="user-header-c"><img src="" alt=""></a>
                                            <div class="user-inform">
                                                <p class="user-name-c">大林</p>
                                                <p class="com-date-c">今天&nbsp15:03</p>
                                            </div>
                                        </div>
                                        <div class="com-t-r">
                                            <div id="com2"></div>
                                        </div>
                                    </div>
                                    <div class="com-bottom">
                                        内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富
                                    </div>
                                </li>
                                <li class="com-item">
                                    <div class="com-top">
                                        <div class="com-t-l">
                                            <a href="./student-page.html" class="user-header-c"><img src="" alt=""></a>
                                            <div class="user-inform">
                                                <p class="user-name-c">大林</p>
                                                <p class="com-date-c">今天&nbsp15:03</p>
                                            </div>
                                        </div>
                                        <div class="com-t-r">
                                            <div id="com3"></div>
                                        </div>
                                    </div>
                                    <div class="com-bottom">
                                        内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富
                                    </div>
                                </li>
                                <li class="com-item">
                                    <div class="com-top">
                                        <div class="com-t-l">
                                            <a href="./student-page.html" class="user-header-c"><img src="" alt=""></a>
                                            <div class="user-inform">
                                                <p class="user-name-c">大林</p>
                                                <p class="com-date-c">今天&nbsp15:03</p>
                                            </div>
                                        </div>
                                        <div class="com-t-r">
                                            <div id="com4"></div>
                                        </div>
                                    </div>
                                    <div class="com-bottom">
                                        内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富
                                    </div>
                                </li>
                                <li class="com-item">
                                    <div class="com-top">
                                        <div class="com-t-l">
                                            <a href="./student-page.html" class="user-header-c"><img src="" alt=""></a>
                                            <div class="user-inform">
                                                <p class="user-name-c">大林</p>
                                                <p class="com-date-c">今天&nbsp15:03</p>
                                            </div>
                                        </div>
                                        <div class="com-t-r">
                                            <div id="com5"></div>
                                        </div>
                                    </div>
                                    <div class="com-bottom">
                                        内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富内容丰富
                                    </div>
                                </li>
                            </ul>
                            <div id="laypage-s"></div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="particulars-right">
                <div class="download-m">
                    <p class="m-title">课程材料</p>
                    <p class="m-name"><span class="m-logo"></span>电商banner设计进阶班材料</p>
                    <a href="./images/qq/1.gif" download="1.gif" class="download-btn"><span class="icon-down"></span>下载</a>
                </div>
  <!--               <div class="curse-rec">
                    <p class="m-title">课程推荐</p>
                    <div class="curse-live z-b-unit">
                        <a href="" class="cur-live-img">
                            <img src="" alt="">
                        </a>
                        <a href="javascript:;" class="curse-name">电商banner设计进阶班进阶班进阶</a>
                        <div class="teachers">
                            <ul class="z-b-curse-garde">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <i class="garde">4.5</i>
                            </ul>
                            <p class="teacher-name">免费</p>
                        </div>
                        <p class="has-learn">
                            <i>265456</i>人已学过
                        </p>
                    </div>
                    <div class="curse-live z-b-unit">
                        <a href="" class="cur-live-img">
                            <img src="" alt="">
                        </a>
                        <a href="javascript:;" class="curse-name">电商banner设计进阶班进阶班进阶</a>
                        <div class="teachers">
                            <ul class="z-b-curse-garde">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <i class="garde">4.5</i>
                            </ul>
                            <p class="teacher-name">免费</p>
                        </div>
                        <p class="has-learn">
                            <i>265456</i>人已学过
                        </p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</div>
<!--遮罩层模块-->
<div id="curse-fun" class="curse-fun" style="display:none">
    <div class="full-shade"></div>
    <div class="get-ticket hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">领取成功</h3>
            <em class="layui-icon layui-icon-close"></em>
            <p class="del-hint">个人中心可查看我的优惠券</p>
            <a href="javascript:;" class="layui-btn sure-btn">确定</a>
        </div>
    </div>
    <div class="curse-buy hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">购买课程</h3>
            <em class="layui-icon layui-icon-close"></em>
            <div class="curse-ord">
                <img src="" alt="" class="curse-img">
                <div class="curse-inform-b">
                    <p class="curse-name-b">电商banner设计班</p>
                    <div class="msg-box">
                        <p class="teacher-msg-b">教师：</p>
                        <i class="date-curse">甄妮</i>
                    </div>
                    <div class="msg-box">
                        <p class="teacher-msg-b">上课时间：</p>
                        <i class="date-curse">
                            2018-07-02至2018-09-03<br>
                            19:00-21:00
                        </i>
                    </div>
                </div>
            </div>
            <ul class="ord-msg">
                <li class="ord-item-msg">
                    <p class="ord-t">订单价格</p>
                    <p class="ord-d">￥1300.00</p>
                </li>
                <li class="ord-item-msg">
                    <p class="ord-t">使用优惠</p>
                    <p class="ord-d use-discounts">未使用优惠 <span class="layui-icon layui-icon-right"></span></p>
                </li>
                <li class="ord-item-msg">
                    <p class="ord-t">支付价格</p>
                    <p class="ord-d active">￥1300.00</p>
                </li>
            </ul>
            <div class="buy-box">
                <a href="./pay-page.html" class="layui-btn buy-now-btn">立即购买</a>
                <button class="layui-btn cancel-btn">取消</button>
            </div>
        </div>
    </div>
    <div class="use-ticket hide-style">
        <div class="hide-d-style">
            <em class="layui-icon layui-icon-left"></em>
            <h3 class="curse-title">选择优惠券</h3>
            <em class="layui-icon layui-icon-close"></em>
            <div class="ticket can-use">
                <div class="ticket-over">
                    <div class="t-o-l">
                        ￥<em class="face-value">10</em>
                    </div>
                    <div class="t-o-c">
                        <h3 class="ticket-name">课程优惠券</h3>
                        <p class="use-range">适用于南瓜π所有课程</p>
                    </div>
                    <div class="t-o-r">
                        <button class="use-now">立即使用</button>
                    </div>
                </div>
                <div class="ticket-down">
                    <p class="deadline">有效期限&nbsp <i class="deadline-d">2018.11.07-2018.11.07</i></p>
                </div>
            </div>
            <div class="ticket can-use">
                <div class="ticket-over">
                    <div class="t-o-l">
                        ￥<em class="face-value">10</em>
                    </div>
                    <div class="t-o-c">
                        <h3 class="ticket-name">课程优惠券</h3>
                        <p class="use-range">适用于南瓜π所有课程</p>
                    </div>
                    <div class="t-o-r">
                        <button class="use-now">立即使用</button>
                    </div>
                </div>
                <div class="ticket-down">
                    <p class="deadline">有效期限&nbsp <i class="deadline-d">2018.11.07-2018.11.07</i></p>
                </div>
            </div>
            <p class="if-use"><span class="layui-icon layui-icon-circle"></span>不使用优惠</p>
        </div>
    </div>
</div>
<script src="res/layui/layui.js"></script>
 <script src="res/js/jquery-1.9.1.min.js"></script>
 <script src="res/js/script.js"></script>
  <script src="res/js/global.js"></script>
    <script type="text/javascript" src="res/layui/config.js"></script>
<script>


layui.use(['jquery', 'steps','form', 'layedit', 'laydate', 'element'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,element = layui.element;
   
    var $ = layui.$;


});


</script>
</body>
</html>